<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YANJUN'S SPACE</title>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
    rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- Main CSS -->
  <link href="styles/main.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <header>
      <div class="logo">
        YANJUN'S SPACE
      </div>
      <nav class="main-nav">
        <img src="./images/menu.png" alt="" class="menu-img" />
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">PORTFOLIO</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </nav>
    </header>
    <section class="section-photo">
      <p>Hi, I'm a graphic designer in Toronto with a passion for branding. I excel in problem-solving and believe that
        good design speaks to the client’s voice through active listening and tailored solutions.</p>
      <nav class="menu-nav">
        <ul>
          <li class="active">All</li>
          <li>Branding</li>
          <li>Editorial</li>
          <li>Ui/Ux design</li>
        </ul>
      </nav>
      <div class="content">
        <div class="left">
          <a class="card portfolio1">
            <div class="hover-box">
              <h5>GABOURY</h5>
              <p>A Toronto-based fashion brand for local artist Jackson Gaboury.</p>
            </div>
          </a>
          <a class="card portfolio2">
            <div class="hover-box">
              <h5>Hey！</h5>
              <p>A brand to make meaningful connections between seniors and young volunteers.</p>
            </div>
          </a>
          <a class="card portfolio5">
            <div class="hover-box">
              <h5>Tao</h5>
              <p>Poster series for taoism.</p>
            </div>
          </a>
        </div>
        <div class="center">
          <a class="card portfolio3">
            <div class="hover-box">
              <h5>U</h5>
              <p>A unisex magazine designed for local artist Jackson Gaboury.</p>
            </div>
          </a>
          <a class="card portfolio4">
            <div class="hover-box">
              <h5>UI / UX design</h5>
              <p>Tim Hortons mobile app improvement.</p>
            </div>
          </a>
          <a class="card portfolio6">
            <div class="hover-box">
              <h5>Hey！</h5>
              <p>Hey! is an innovative crowdfunding platform dedicated to improving the lives of seniors.</p>
            </div>
          </a>
        </div>
        <div class="right">
          <a class="card portfolio5">
            <div class="hover-box">
              <h5>Tao</h5>
              <p>Poster series for taoism.</p>
            </div>
          </a>
          <a class="card portfolio6">
            <div class="hover-box">
              <h5>Hey！</h5>
              <p>Hey! is an innovative crowdfunding platform dedicated to improving the lives of seniors.</p>
            </div>
          </a>
        </div>
      </div>
    </section>
    <section class="section-contact">
      <h2>Contact</h2>
      <div class="form">
        <div class="left-info">
          <div class="info-item">
            <div class="info-title">Email Address</div>
            <div class="info-value">support.yourdomain@email.com</div>
          </div>
          <div class="info-item">
            <div class="info-title">Telephone</div>
            <div class="info-value">+123 45 56 879</div>
          </div>
          <div class="info-item">
            <div class="info-title">Address</div>
            <div class="info-value">09 Design Street, Downtown Victoria,
              Australia</div>
          </div>
        </div>
        <form action="post" action="#" class="contact-form">
          <div class="col">
            <input type="text" placeholder="Your name">
            <input type="text" placeholder="Your email">
          </div>
          <input type="text" placeholder="Subject">
          <textarea name="comments" id="comments" placeholder="Your comments"></textarea>
          <input type="submit" value="Send message">
        </form>
      </div>
    </section>
    <footer>
      <div class="footer-logo">YANJUN'S SPACE</div>
      <nav>
        <ul class="footer-social">
          <li><a href="#"><i class="fa-brands fa-square-facebook"></i></a></li>
          <li><a href="#"><i class="fa-brands fa-square-twitter"></i></a></li>
          <li><a href="#"><i class="fa-brands fa-square-instagram"></i></a></li>
          <li><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
        </ul>
      </nav>
      <p>Copyright YANJUN'S SPACE 2024</p>
    </footer>
  </div>
</body>

</html>